<template>
  <div class="designer-review-container">
    <div class="page-header">
      <h2>设计师评价</h2>
      <p>对为您提供服务的设计师进行评价，帮助我们提升服务质量</p>
    </div>
    
    <el-tabs v-model="activeTab" class="review-tabs">
      <el-tab-pane label="待评价" name="pending">
        <div class="empty-tip" v-if="pendingReviews.length === 0">
          <el-empty description="暂无待评价的设计师" />
        </div>
        
        <div v-else class="review-list">
          <el-card v-for="item in pendingReviews" :key="item.id" class="review-card">
            <div class="designer-info">
              <div class="designer-avatar">
                <el-avatar :size="80" :src="item.avatar"></el-avatar>
                <el-tag 
                  :type="getLevelTagType(item.level)" 
                  class="level-tag">{{ item.levelName }}</el-tag>
              </div>
              
              <div class="designer-detail">
                <h3 class="designer-name">{{ item.name }}</h3>
                
                <div class="designer-specialty">
                  <span>专长：</span>
                  <el-tag
                    v-for="(tag, index) in item.specialtyTags"
                    :key="index"
                    size="small"
                    effect="plain"
                    style="margin-right: 5px"
                  >{{ tag }}</el-tag>
                </div>
                
                <div class="service-info">
                  <p>服务时间：{{ item.serviceTime }}</p>
                  <p>服务类型：{{ item.serviceType }}</p>
                  <p>订单编号：{{ item.orderNo }}</p>
                </div>
              </div>
            </div>
            
            <el-divider />
            
            <el-button type="primary" size="large" @click="openReviewDialog(item)">
              立即评价
            </el-button>
          </el-card>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="已评价" name="reviewed">
        <div class="empty-tip" v-if="reviewedDesigners.length === 0">
          <el-empty description="暂无已评价的设计师" />
      </div>
      
        <div v-else class="review-list">
          <el-card v-for="item in reviewedDesigners" :key="item.id" class="review-card">
        <div class="designer-info">
              <div class="designer-avatar">
                <el-avatar :size="80" :src="item.avatar"></el-avatar>
                <el-tag 
                  :type="getLevelTagType(item.level)" 
                  class="level-tag">{{ item.levelName }}</el-tag>
              </div>
              
              <div class="designer-detail">
                <h3 class="designer-name">{{ item.name }}</h3>
                
                <div class="designer-specialty">
                  <span>专长：</span>
                  <el-tag
                    v-for="(tag, index) in item.specialtyTags"
                    :key="index"
                    size="small"
                    effect="plain"
                    style="margin-right: 5px"
                  >{{ tag }}</el-tag>
                </div>
                
                <div class="service-info">
                  <p>服务时间：{{ item.serviceTime }}</p>
                  <p>服务类型：{{ item.serviceType }}</p>
                  <p>订单编号：{{ item.orderNo }}</p>
                </div>
              </div>
            </div>
            
            <el-divider />
            
            <div class="review-detail">
              <div class="rating-area">
                <div class="rating-item">
                  <span class="rating-label">服务态度：</span>
                  <el-rate v-model="item.review.serviceRating" disabled text-color="#ff9900" />
                </div>
                
                <div class="rating-item">
                  <span class="rating-label">专业技能：</span>
                  <el-rate v-model="item.review.skillRating" disabled text-color="#ff9900" />
                </div>
                
                <div class="rating-item">
                  <span class="rating-label">响应速度：</span>
                  <el-rate v-model="item.review.responseRating" disabled text-color="#ff9900" />
                </div>
                
                <div class="rating-item">
                  <span class="rating-label">沟通能力：</span>
                  <el-rate v-model="item.review.communicationRating" disabled text-color="#ff9900" />
                </div>
              </div>
              
              <div class="review-content">
                <div class="review-text">
                  <p><strong>评价内容：</strong>{{ item.review.content }}</p>
                </div>
                
                <div class="review-time">
                  <p>评价时间：{{ item.review.reviewTime }}</p>
                </div>
                
                <div class="review-actions">
                  <el-button type="primary" plain size="small" @click="openUpdateDialog(item)">
                    修改评价
                  </el-button>
                  <el-button type="danger" plain size="small" @click="confirmDeleteReview(item.id)">
                    删除评价
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 评价表单对话框 -->
    <el-dialog
      v-model="reviewDialogVisible"
      :title="isUpdate ? '修改设计师评价' : '设计师评价'"
      width="650px"
      destroy-on-close
    >
      <div v-if="currentDesigner" class="review-form-container">
        <div class="designer-info-mini">
          <el-avatar :size="60" :src="currentDesigner.avatar"></el-avatar>
          <div class="designer-info-detail">
            <h4>{{ currentDesigner.name }} <el-tag size="small" :type="getLevelTagType(currentDesigner.level)">{{ currentDesigner.levelName }}</el-tag></h4>
            <p>服务时间：{{ currentDesigner.serviceTime }} | 订单编号：{{ currentDesigner.orderNo }}</p>
          </div>
        </div>
        
        <el-form 
          ref="reviewFormRef"
          :model="reviewForm"
          :rules="reviewRules"
          label-position="top"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="服务态度评分" prop="serviceRating">
                <el-rate v-model="reviewForm.serviceRating" show-text :texts="ratingTexts" />
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="专业技能评分" prop="skillRating">
                <el-rate v-model="reviewForm.skillRating" show-text :texts="ratingTexts" />
          </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="响应速度评分" prop="responseRating">
                <el-rate v-model="reviewForm.responseRating" show-text :texts="ratingTexts" />
          </el-form-item>
            </el-col>
          
            <el-col :span="12">
          <el-form-item label="沟通能力评分" prop="communicationRating">
                <el-rate v-model="reviewForm.communicationRating" show-text :texts="ratingTexts" />
          </el-form-item>
            </el-col>
          </el-row>
          
          <el-form-item label="评价内容" prop="content">
            <el-input 
              v-model="reviewForm.content"
              type="textarea" 
              :rows="4"
              placeholder="请分享您对设计师服务的感受，如专业水平、服务态度、沟通能力等..."
            />
          </el-form-item>
          
          <el-form-item label="设计师优点" prop="pros">
            <el-select
              v-model="reviewForm.pros"
              multiple
              filterable
              allow-create
              default-first-option
              style="width: 100%"
              placeholder="选择或输入设计师的优点"
            >
              <el-option v-for="item in proOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="建议改进" prop="improvements">
            <el-select
              v-model="reviewForm.improvements"
              multiple
              filterable
              allow-create
              default-first-option
              style="width: 100%"
              placeholder="选择或输入对设计师的建议"
            >
              <el-option v-for="item in improvementOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="是否匿名评价">
            <el-switch v-model="reviewForm.anonymous" />
            <span class="anonymous-tip">开启后，您的用户名将不会显示在评价中</span>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="reviewDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReview">提交评价</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 确认删除对话框 -->
    <el-dialog
      v-model="deleteConfirmVisible"
      title="确认删除"
      width="400px"
    >
      <p>确定要删除对该设计师的评价吗？删除后无法恢复。</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteConfirmVisible = false">取消</el-button>
          <el-button type="danger" @click="deleteReview">确认删除</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'DesignerReview',
  setup() {
    const activeTab = ref('pending')
    const pendingReviews = ref([])
    const reviewedDesigners = ref([])
    const reviewDialogVisible = ref(false)
    const deleteConfirmVisible = ref(false)
    const reviewFormRef = ref(null)
    const currentDesigner = ref(null)
    const isUpdate = ref(false)
    const deleteReviewId = ref(null)
    
    // 评分文字描述
    const ratingTexts = ['非常差', '差', '一般', '好', '非常好']
    
    // 设计师优点选项
    const proOptions = [
      '专业技能强',
      '沟通能力好',
      '态度友好',
      '响应速度快',
      '服务周到',
      '建议实用',
      '解决方案创新',
      '耐心细致',
      '风格把握精准',
      '能理解需求'
    ]
    
    // 建议改进选项
    const improvementOptions = [
      '沟通可更清晰',
      '响应速度可提高',
      '专业建议可更详细',
      '服务态度可改进',
      '更多样式建议',
      '更多面料选择',
      '关注细节可加强',
      '方案展示可更直观'
    ]
    
    // 评价表单数据
    const reviewForm = reactive({
      serviceRating: 5,
      skillRating: 5,
      responseRating: 5,
      communicationRating: 5,
      content: '',
      pros: [],
      improvements: [],
      anonymous: false
    })
    
    // 计算总评分
    const calculateOverallRating = (review) => {
      return ((review.serviceRating || 0) + 
              (review.skillRating || 0) + 
              (review.responseRating || 0) + 
              (review.communicationRating || 0)) / 4
    }
    
    // 表单验证规则
    const reviewRules = {
      serviceRating: [
        { required: true, message: '请选择服务态度评分', trigger: 'change' }
      ],
      skillRating: [
        { required: true, message: '请选择专业技能评分', trigger: 'change' }
      ],
      responseRating: [
        { required: true, message: '请选择响应速度评分', trigger: 'change' }
      ],
      communicationRating: [
        { required: true, message: '请选择沟通能力评分', trigger: 'change' }
      ],
      content: [
        { required: true, message: '请输入评价内容', trigger: 'blur' },
        { min: 10, max: 500, message: '评价内容在10-500字之间', trigger: 'blur' }
      ]
    }
    
    // 获取级别标签类型
    const getLevelTagType = (level) => {
      const typeMap = {
        'junior': 'info',
        'intermediate': 'success',
        'senior': 'warning',
        'chief': 'danger'
      }
      return typeMap[level] || 'info'
    }
    
    // 初始化数据
    onMounted(() => {
      // 在实际项目中应该从API获取数据
      loadPendingReviews()
      loadReviewedDesigners()
    })
    
    // 加载待评价设计师
    const loadPendingReviews = () => {
      // 模拟数据，实际项目中应该从API获取
      pendingReviews.value = [
        {
          id: 1,
          name: '王设计师',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          level: 'senior',
          levelName: '高级设计师',
          specialtyTags: ['西装定制', '正装'],
          serviceTime: '2023-04-10',
          serviceType: '上门量体服务',
          orderNo: 'SVC20230410001'
        },
        {
          id: 2,
          name: '李设计师',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          level: 'intermediate',
          levelName: '中级设计师',
          specialtyTags: ['休闲装定制', '时尚休闲'],
          serviceTime: '2023-04-15',
          serviceType: '线上设计咨询',
          orderNo: 'SVC20230415002'
        }
      ]
    }
    
    // 加载已评价设计师
    const loadReviewedDesigners = () => {
      // 模拟数据，实际项目中应该从API获取
      reviewedDesigners.value = [
        {
          id: 3,
          name: '张设计师',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          level: 'chief',
          levelName: '首席设计师',
          specialtyTags: ['工装定制', '职业装'],
          serviceTime: '2023-03-20',
          serviceType: '上门量体服务',
          orderNo: 'SVC20230320003',
          review: {
            serviceRating: 5,
            skillRating: 5,
            responseRating: 4.5,
            communicationRating: 5,
            content: '张设计师非常专业，在设计过程中给了我很多有用的建议。他对面料和款式都有很深的了解，能够根据我的体型特点推荐最合适的版型。沟通非常顺畅，每个细节都解释得很清楚。非常满意这次服务！',
            pros: ['专业技能强', '态度友好', '建议实用'],
            improvements: [],
            reviewTime: '2023-03-25'
          }
        },
        {
          id: 4,
          name: '陈设计师',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          level: 'junior',
          levelName: '初级设计师',
          specialtyTags: ['休闲装定制', '时尚休闲'],
          serviceTime: '2023-02-18',
          serviceType: '线上设计咨询',
          orderNo: 'SVC20230218004',
          review: {
            serviceRating: 4,
            skillRating: 3.5,
            responseRating: 4.5,
            communicationRating: 4,
            content: '陈设计师服务态度很好，反应也很迅速。作为初级设计师，在一些专业方面的建议可以更深入一些，但整体来说还是不错的。希望他能在专业技能上继续提升，相信会成为很棒的设计师。',
            pros: ['态度友好', '响应速度快'],
            improvements: ['专业建议可更详细', '关注细节可加强'],
            reviewTime: '2023-02-25'
          }
        }
      ]
    }
    
    // 打开评价对话框
    const openReviewDialog = (designer) => {
      currentDesigner.value = designer
      isUpdate.value = false
      
      // 重置表单
      Object.assign(reviewForm, {
        serviceRating: 5,
        skillRating: 5,
        responseRating: 5,
        communicationRating: 5,
        content: '',
        pros: [],
        improvements: [],
        anonymous: false
      })
      
      reviewDialogVisible.value = true
    }
    
    // 打开修改评价对话框
    const openUpdateDialog = (designer) => {
      currentDesigner.value = designer
      isUpdate.value = true
      
      // 填充表单数据
      Object.assign(reviewForm, {
        serviceRating: designer.review.serviceRating,
        skillRating: designer.review.skillRating,
        responseRating: designer.review.responseRating,
        communicationRating: designer.review.communicationRating,
        content: designer.review.content,
        pros: designer.review.pros || [],
        improvements: designer.review.improvements || [],
        anonymous: false // 假设匿名状态无法获取
      })
      
      reviewDialogVisible.value = true
    }
    
    // 提交评价
    const submitReview = async () => {
      if (!reviewFormRef.value) return
      
      const valid = await reviewFormRef.value.validate().catch(() => false)
      if (!valid) {
        ElMessage.error('请完成表单填写')
        return
      }
      
      // 构建评价数据
      const reviewData = {
        designerId: currentDesigner.value.id,
        serviceRating: reviewForm.serviceRating,
        skillRating: reviewForm.skillRating,
        responseRating: reviewForm.responseRating,
        communicationRating: reviewForm.communicationRating,
        content: reviewForm.content,
        pros: reviewForm.pros,
        improvements: reviewForm.improvements,
        anonymous: reviewForm.anonymous
      }
      
      // 在实际项目中，这里应该调用API提交评价
      console.log('提交评价数据:', reviewData)
      
      if (isUpdate.value) {
        // 更新现有评价
        const index = reviewedDesigners.value.findIndex(d => d.id === currentDesigner.value.id)
        if (index !== -1) {
          reviewedDesigners.value[index].review = {
            ...reviewData,
            reviewTime: new Date().toLocaleDateString('zh-CN')
          }
          ElMessage.success('评价更新成功')
        }
      } else {
        // 添加新评价
        const newReview = {
          ...currentDesigner.value,
          review: {
            ...reviewData,
            reviewTime: new Date().toLocaleDateString('zh-CN')
          }
        }
        reviewedDesigners.value.unshift(newReview)
        
        // 从待评价列表中移除
        pendingReviews.value = pendingReviews.value.filter(d => d.id !== currentDesigner.value.id)
        
        ElMessage.success('评价提交成功')
      }
      
      reviewDialogVisible.value = false
      
      // 确保显示已评价标签页
      activeTab.value = 'reviewed'
    }
    
    // 确认删除评价
    const confirmDeleteReview = (reviewId) => {
      deleteReviewId.value = reviewId
      deleteConfirmVisible.value = true
    }
    
    // 删除评价
    const deleteReview = () => {
      if (!deleteReviewId.value) return
      
      // 在实际项目中，这里应该调用API删除评价
      
      // 从已评价列表中移除
      const index = reviewedDesigners.value.findIndex(d => d.id === deleteReviewId.value)
      if (index !== -1) {
        const deletedDesigner = reviewedDesigners.value.splice(index, 1)[0]
        
        // 将设计师添加回待评价列表
        const designerWithoutReview = {
          id: deletedDesigner.id,
          name: deletedDesigner.name,
          avatar: deletedDesigner.avatar,
          level: deletedDesigner.level,
          levelName: deletedDesigner.levelName,
          specialtyTags: deletedDesigner.specialtyTags,
          serviceTime: deletedDesigner.serviceTime,
          serviceType: deletedDesigner.serviceType,
          orderNo: deletedDesigner.orderNo
        }
        pendingReviews.value.push(designerWithoutReview)
      }
      
      deleteConfirmVisible.value = false
      deleteReviewId.value = null
      
      ElMessage.success('评价已删除')
    }
    
    return {
      activeTab,
      pendingReviews,
      reviewedDesigners,
      reviewDialogVisible,
      deleteConfirmVisible,
      reviewFormRef,
      currentDesigner,
      isUpdate,
      reviewForm,
      reviewRules,
      ratingTexts,
      proOptions,
      improvementOptions,
      getLevelTagType,
      calculateOverallRating,
      openReviewDialog,
      openUpdateDialog,
      submitReview,
      confirmDeleteReview,
      deleteReview
    }
  }
}
</script>

<style scoped>
.designer-review-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 500;
}

.page-header p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.review-tabs {
  margin-bottom: 20px;
}

.empty-tip {
  padding: 30px 0;
}

.review-list {
  margin-top: 20px;
}

.review-card {
  margin-bottom: 20px;
}

.designer-info {
  display: flex;
  margin-bottom: 15px;
}

.designer-avatar {
  position: relative;
  margin-right: 20px;
}

.level-tag {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  padding: 0 5px;
}

.designer-detail {
  flex: 1;
}

.designer-name {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 500;
}

.designer-specialty {
  margin-bottom: 10px;
}

.service-info {
  font-size: 13px;
  color: #606266;
}

.service-info p {
  margin: 5px 0;
}

.review-detail {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

.rating-area {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.rating-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 10px;
}

.rating-label {
  margin-right: 8px;
  white-space: nowrap;
}

.review-content {
  padding: 10px 0;
}

.review-text {
  margin-bottom: 15px;
  line-height: 1.6;
}

.review-time {
  color: #909399;
  font-size: 13px;
  margin-bottom: 15px;
}

.review-actions {
  display: flex;
  gap: 10px;
}

.designer-info-mini {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.designer-info-detail {
  margin-left: 15px;
}

.designer-info-detail h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.designer-info-detail p {
  margin: 0;
  color: #606266;
  font-size: 13px;
}

.anonymous-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}

@media (max-width: 768px) {
  .rating-area {
    flex-direction: column;
  }
  
  .rating-item {
    margin-right: 0;
  }
}
</style> 